<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>MyPetStore</title>
	<link rel="StyleSheet" href="css/mypetstoreNew.css" type="text/css" media="screen"/>
	<link rel="stylesheet" type="text/css" href="css/login&register.css">
	<script src="js/jquery-3.6.2.min.js"></script>
</head>
<body>
<div th:replace="common/top"></div>

<div class="box">
	<div class="content">
		<img src="images/login.jpg" alt="登录" class="login-img">
		<img src="images/register.jpg" alt="注册" class="register-img">
		<div class="login-wrapper">
			<div class="slogan">
				<span class="slogan-foruser">尊重生命</span>
				<span class="slogan-change" data-page="login">注册</span>
			</div>
			<h1 class="text">登录</h1>
			<div class="xiaolu">

			</div>
			<form action="/signOn" class="user-form" id="login-form" method="POST">
				<div class="login-form">
					<div class="user-form form-item">
						<div class="text-tips">
							<span class="tip">账号</span>
							<div th:if="${errorMessage}!=null" class="feedback" id="user-account1" th:text="${errorMessage}"></div>
						</div>
						<input type="text" class="input-special" id="input-account1" name="username">
					</div>
					<div class="password-form form-item">
						<div class="text-tips">
							<span class="tip">密码</span>
						</div>
						<input type="password" class="input-special" id="input-password1" name="password">
					</div>
					<div class="vcode-form form-item">
						<div class="text-tips">
							<span class="tip">验证码</span>
							<div class="feedback" id="user-vcode1" data-errorMsg1="验证码错误" data-errorMsg2="请输入验证码">验证码错误</div>
						</div>
						<input type="text" class="input-special" id="input-vcode1">
					</div>
					<div class="bynandvcode">
						<button class="btn" id="loginBtn" type="submit">登录</button>
						<canvas id="cvs1"></canvas>
					</div>
				</div>
			</form>
			<form action="/register" method="POST" id="register-form">
				<div class="register-form">
					<div class="user-form form-item">
						<div class="text-tips">
							<span class="tip">账号</span>
							<div class="feedback" id="user-account2"></div>
						</div>
						<input type="text" class="input-special" id="input-account2" name="username">
						<div class="tips" id="account-tips">用户名长度必须大于5</div>
					</div>
					<div class="password-form form-item">
						<div class="text-tips">
							<span class="tip">密码</span>
							<div class="feedback" id="user-password2">密码格式不正确</div>
						</div>
						<input type="password" class="input-special" id="input-password2" name="password">
						<div class="tips" id="password-tip1">不能包括空格</div>
						<div class="tips" id="password-tip2">长度为8-16个字符</div>
						<div class="tips" id="password-tip3">必须包含数字、字母、符号中的两种</div>
					</div>
					<div class="password-form form-item">
						<div class="text-tips">
							<span class="tip">确认密码</span>
							<div class="feedback" id="user-passwordConfirm2">两次输入的密码不一致</div>
						</div>
						<input type="password" class="input-special" id="input-passwordConfirm2">
					</div>
					<div class="vcode-form form-item">
						<div class="text-tips">
							<span clas s="tip">验证码</span>
							<div class="feedback" id="user-vcode2" data-errorMsg="验证码错误">验证码错误</div>
						</div>
						<input type="text" class="input-special" id="input-vcode2">
					</div>
					<div class="bynandvcode">
						<button class="btn" id="registerBtn" type="submit">注册</button>
						<canvas id="cvs2"></canvas>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

<script src="js/login&register.js"></script>
<script src="js/inspection.js"></script>

<div th:replace="common/bottom"></div>
</body>
</html>